<?php 
$accountButtonCSS = "padding-left:5px;padding-right:5px;padding-top:5px;padding-bottom:5px;font-size:.8em;"; 
	

//Start userInfo Function

//ajax verion
//if($_GET['function'] == 'userInfo') {
function userInfo($username,$element) { 
	//ajax verion
	//$userName = $_GET['username'];
	//$element = $_GET['element'];
	
	//Start Connection
	$mysqli = new mysqli('localhost','root','3lch@rr099','shellicio_us');
	
	/* check connection */
	if (mysqli_connect_errno()) {
	    printf("Connect failed: %s\n", mysqli_connect_error());
	    exit();
	}
		
	$query = "SELECT * FROM users WHERE username = '$username'";
	$result = $mysqli->query($query);
	
	/* associative array */
	$row = $result->fetch_array(MYSQLI_ASSOC);
	return $row[$element];
	
	/* free result set */
	$result->free();
	
	/* close connection */
	$mysqli->close();

//End userInfo Function
}	

//User Info Variables
$users_username = userInfo('mindamp','username');
$users_email = userInfo('mindamp','email');
$users_register_date = userInfo('mindamp','register_date');
$users_last_login = userInfo('mindamp','last_login');
$users_dollars_donated = userInfo('mindamp','dollars_donated');

?>

<div class="wrapper style1" style="text-align:center !important;">
	<article id="" class="container 100%" style="text-align:center !important;">
		<header></header>
		<h2>Your Profile</h2>
		
		<!--<div class="" style="">
			<form action="upload.php" method="post" enctype="multipart/form-data">
				<div style="margin-left:200px;">
					Select image to upload:
					<input type="file" name="fileToUpload" id="fileToUpload" class="custom-file-input"><br />
				</div>
				<button type="submit" value="Upload Image" name="submit" class="button" style="<?php echo $accountButtonCSS; ?>">Upload Image</button>
			</form>
		</div>-->

		
		<div style="font-size:.8em;width:100%;text-align:center;">
			<table style="width:500px;margin-left:auto;margin-right:auto;">
			<tr><td>
				<img src="images/profiles/anon.jpg" style="height:130px;margin-right:20px;">
			</td><td style="vertical-align:top;">
				<table style="">
				<tr><td style="text-align:left;width:120px;font-size:1em;">
					Username:
				</td><td style="text-align:right;font-size:1em;font-weight:bold;font-color:black;">
					<?php echo $users_username; ?>
				</td></tr>
				<tr><td style="text-align:left;width:120px;font-size:1em;">
					Email:
				</td><td style="text-align:right;font-size:1em;font-weight:bold;font-color:black;">
					<?php echo $users_email; ?>
				</td></tr>				
				<tr><td style="text-align:left;width:120px;">
					Signup Date:
				</td><td style="text-align:right;">
					<?php echo date('F j, Y, g:i A T',$users_register_date); ?>
				</td></tr>
				<tr><td style="text-align:left;width:120px;">
					Last Login Date:
				</td><td style="text-align:right;">
					<?php echo date('F j, Y, g:i A T',$users_last_login); ?>
				</td></tr>
				</table>
			</td></tr></table>
		</div>
		
	<div style="clear:both;"></div>

		<div id="accountButtons">
			<button onClick="$('#accountTabData').slideUp('slower', function() { $('#accountTabData').html($('#accountSettings').html()).slideDown(); });" class="button" style="<?php echo $accountButtonCSS; ?>" href="#accountSettings">Account Setttings</button>&nbsp;
			<button onClick="$('#accountTabData').slideUp('slower', function() { $('#accountTabData').html($('#credentialSettings').html()).slideDown(); });" class="button" style="<?php echo $accountButtonCSS; ?>"  href="#credentialSettings">Credential Settings</button>&nbsp;
			<button onClick="$('#accountTabData').slideUp('slower', function() { $('#accountTabData').html($('#donations').html()).slideDown(); });" class="button" style="<?php echo $accountButtonCSS; ?>"  href="#donations">Donations</button>&nbsp;
			<button onClick="$('#accountTabData').slideUp('slower', function() { $('#accountTabData').html($('#servicesSummary').html()).slideDown(); });" class="button" style="<?php echo $accountButtonCSS; ?>"  href="#servicesSummary">Services Summary</button>&nbsp;
			<button onClick="$('#accountTabData').slideUp('slower', function() { $('#accountTabData').html($('#supportTickets').html()).slideDown(); });" class="button" style="<?php echo $accountButtonCSS; ?>"  href="#supportTickets">Support Tickets</button>&nbsp;
		</div>

		<div style="clear:both;border-bottom:1px dashed grey;width:50%;margin-left:auto;margin-right:auto;margin-bottom:20px;"><br /></div>
		
		<div id="accountDataContainer" style="width:100%;border-width:0px 1px 1px 1px;border-color:grey;border-style:solid;box-shadow: 10px 10px 5px #888888;">
			<div class="accountTab" id="accountTabData" style="margin-bottom:20px;"></div>
		    <div class="accountTab" id="accountSettings" style="display:none;margin-bottom:20px;">
		    	<h2 style="color:#84b8d9;">Account Settings</h2>
				<p>Change your password and profile information, or remove your account.</p>
				<button class="button" style="<?php echo $accountButtonCSS; ?>">Change your Avatar</button>&nbsp;
				<button onClick="$('#updateEmailModal').modal();" class="button" style="<?php echo $accountButtonCSS; ?>">Change your Email Address</button>&nbsp;
				<button onClick="$('#updatePassModal').modal({minHeight: '450px'});" class="button" style="<?php echo $accountButtonCSS; ?>">Change your Password</button>&nbsp;
				<button class="button alt" style="<?php echo $accountButtonCSS; ?>">Remove Account Completely</button>
			</div>
			<div class="accountTab" id="credentialSettings" style="display:none;margin-bottom:20px;">
		    	<h2 style="color:#84b8d9;">Credential Settings</h2>
		    	<p>Your current credential list. Add, delete and create credentials from here.</p>
		    	<button onClick="createMemberCredentialButton();" class="button" style="<?php echo $accountButtonCSS; ?>">Create Credential Set</button>&nbsp;
		    	<button class="button alt" style="<?php echo $accountButtonCSS; ?>">Delete a Credential Set</button>&nbsp;
		    	<button onClick="$('#destroyAllModal').modal();" class="button alt" style="<?php echo $accountButtonCSS; ?>" type="reset">Destroy all Credential Sets</button><br /><br />
		    	<div style="">
					<div id="credentialUserListData" style="background-color:white;margin-left:auto;margin-right:auto;text-align:center;width:97%;">
						<header>
							<br><p>One moment while we lookup your credentials ...</p><br><img src="images/loader.gif" style="text-align:center;height:100px;" alt="Loading data...">
						</header>
					</div>
					<script type="text/javascript">credentialUserList();$('#credentialUserListTable').DataTable();</script>
				</div>		
		    </div>
			<div class="accountTab" id="donations" style="display:none;margin-bottom:20px;">
		    	<h2 style="color:#84b8d9;">Donations</h2>
		    	<p>Below is a record of your donations. You have donated <span style="color:green;font-weight:bold;font-size:2em;"><?php echo money_format('$%i',$users_dollars_donated); ?></span> to date. <i>You have earned your lifetime account and never have to donate again.</i> However to help improve services you could always contribute more. You can even donate time, goods or services as well.</p>
		    	<button class="button" style="<?php echo $accountButtonCSS; ?>">Make a Donation with Debit/Credit or PayPal</button>&nbsp;
		    	<button class="button" style="<?php echo $accountButtonCSS; ?>">Make a Donation with Goods or Services</button>
			</div>
			<div class="accountTab" id="servicesSummary" style="display:none;margin-bottom:20px;">
		    	<h2 style="color:#84b8d9;">Services Summary</h2>
		    	<p>A summary of how your account works, your master user credentials, your slave credentials, hosting and etc...</p>
			</div>	
			<div class="accountTab" id="supportTickets" style="display:none;margin-bottom:20px;">
		    	<h2 style="color:#84b8d9;">Support Tickets</h2>
		    	<p>Your support tickets and support history.</p>
			</div>
			
			<script>
				$('#accountTabData').html($('#accountSettings').html());
				$('#accountDataContainer').corner('30px bl').corner('30px br').corner('30px tr').corner('30px tl');
			</script>

		</div>
				
		<!--<div id="accountTabs" style="text-align:left !important;width:100%;">
			<ul>
		    	<li><a href="#accountSettings">Account Setttings</a></li>
				<li><a href="#credentialSettings">Credential Settings</a></li>
				<li><a href="#donations">Donations</a></li>
				<li><a href="#servicesSummary">Services Summary</a></li>
				<li><a href="#supportTickets">Support Tickets</a></li>												
			</ul>
		    <div id="accountSettings">
				<p>Change your password and profile information, or remove your account.</p>
				<button class="button" style="padding:5px;">Change your Avatar</button>&nbsp;<button class="button" style="padding:5px;">Change your Email Address</button>&nbsp;<button class="button" style="padding:5px;">Change your Password</button>&nbsp;<button class="button alt" style="padding:5px;">Remove Account Completely</button>
			</div>
			<div id="credentialSettings">
		    	<p>Your current credential list. Add, delete and create credentials from here.</p>
		    	<button class="button" style="padding:5px;">Create Credential Set</button>&nbsp;<button class="button alt" style="padding:5px;">Delete a Credential Set</button>&nbsp;<button class="button alt" style="padding:5px;" type="reset">Destroy all Credential Sets</button>			
		    </div>
			<div id="donations">
		    	<p>Your past donations and receipts.</p>
		    	<button class="button" style="padding:5px;">Make a Donation with Debit/Credit or PayPal</button>&nbsp;<button class="button" style="padding:5px;">Make a Donation with Goods or Services</button>
			</div>
			<div id="servicesSummary">
		    	<p>A summary of how your account works, your master user credentials, your slave credentials, hosting and etc...</p>
			</div>	
			<div id="supportTickets">
		    	<p>Your support tickets and support history.</p>
			</div>					
		</div>-->
								
	</article>	
</div>			

<div id="createMemberCredentialModal" style="display:none;text-align:center;">
	<span style="color:grey;" class="icon fa-key fa-3x"></span><br /><br />
	<h3>Create a set of Credentials</h3>
	<p id="createMemberCredentialLoader" style="display:none;margin-top:100px;"><img src="images/loader.gif" style="height:100px;"></p>
	<p id="createMemberCredentialText">Choose an expiration date for this set of credentials and click create.</p>
	<p id="createMemberCredentialText2">Expiration Date: <input type="text" id="createMemberCredentialDatePicker" style="width:100px;"></p>
	<button id="createMemberCredentialButton" onClick="var expiration = $('#createMemberCredentialDatePicker').val(); if(expiration == '') { $('#createMemberCredentialText').html('Please pick and expiration date to continue...'); $('#createMemberCredentialDatePicker').css('border-color','pink'); } else { createMemberCredential(expiration); }" class="button" style="">Create Credentials</button><br />
</div>

<div id="destroyAllModal" style="display:none;text-align:center;">
	<span style="color:grey;" class="icon fa-key fa-3x"></span><br /><br />
	<h3>Destroy All Credentials</h3>
	<p id="destroyAllLoader" style="display:none;margin-top:50px;"><img src="images/loader.gif" style="height:100px;"></p>
	<p id="destroyAllText">Are you sure you want to destroy all of your credentials?</p>
	<button id="destroyAllButton" onClick="destroyAll();" class="button alt" style="">Destroy All Credentials</button><br />
</div>

<div id="updateEmailModal" style="display:none;text-align:center;">
	<span style="color:grey;" class="icon fa-envelope fa-3x"></span><br /><br />
	<h3>Update Your Email Address</h3>
	<p id="updateEmailText">Enter your new email address below and click update.</p>
	<input id="newEmail" type="text" style="width:300px;"></input><br /><br />
	<button id="updateEmailButton" onClick="updateUserInfo('<?php echo $users_username; ?>',$('#newEmail').val(),'email')" class="button" style="<?php echo $accountButtonCSS; ?>">Update Email Address</button><br />
</div>

<div id="updatePassModal" style="display:none;text-align:center;">
	<span style="color:grey;" class="icon fa-user fa-3x"></span><br /><br />
	<h3>Update Your Password</h3>
	<p id="updatePassText">Enter your password twice below and click update.</p>
	<input id="newPass1" type="password" style="width:300px;"></input><br />
	<input id="newPass2" type="password" style="width:300px;"></input><br /><br />
	<button id="updatePassButton" onClick="if($('#newPass1').val() != ''){$('#newPass2').focus().css('border-color','pink');$('#updatePassText').html('There was a problem, please try again.'); } if ($('#newPass1').val() !== $('#newPass2').val() || $('#newPass1').val() == '') { $('#newPass1').css('border-color','pink').focus(); $('#newPass1').css('border-color','pink');$('#updatePassText').html('There was a problem, please try again.'); } else { updateUserInfo('<?php echo $users_username; ?>',$('#newPass1').val(),'password'); }" class="button" style="<?php echo $accountButtonCSS; ?>">Update Password</button><br />
</div>